<template>
  <div>
    <lb-title :isBack="true"></lb-title>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="authForm"
        :rules="authFormRules"
        ref="authForm"
        label-width="110px"
      >
        <el-form-item label="姓名" prop="user_name">
          <el-input v-model="authForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="authForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="代理等级" prop="level">
          <block v-if="agentLevel === 1 && agentLevelSelect.length > 0">
            <el-radio
              v-model="authForm.level"
              v-for="item in agentLevelSelect"
              :key="item.title"
              :label="item.id"
              >{{ item.title }}</el-radio
            >
          </block>
          <block v-else
            >暂无代理等级
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="$router.push('/editAgentLevel')"
              >{{ $t('menu.AddAgentLevel') }}</el-button
            >
          </block>
        </el-form-item>
        <el-form-item label="代理地区" prop="province">
          <el-cascader
            size="large"
            :options="areaOptions"
            v-model="selectedOptions"
            @change="handleChange"
            placeholder="请选择代理地区"
            :props="{ checkStrictly: true }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="到期时间" prop="over_time">
          <el-date-picker
            v-model="authForm.over_time"
            type="datetime"
            placeholder="选择日期时间"
            default-time="23:59:59"
            :picker-options="pickerOptions"
            style="width: 300px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormInfo('authForm')">{{
            $t('action.submit')
          }}</el-button>
          <el-button type="default" @click="$router.back(-1)">{{
            $t('action.back')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { provinceAndCityData } from 'element-china-area-data'
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          const one = 1 * 24 * 3600 * 1000
          return time.getTime() < Date.now() - one
        }
      },
      agentLevelSelect: [],
      agentLevel: 0,
      areaOptions: provinceAndCityData,
      selectedOptions: [],
      authForm: {
        id: '',
        user_name: '',
        mobile: '',
        level: '',
        province: '',
        city: '',
        province_code: '',
        city_code: '',
        over_time: ''
      },
      authFormRules: {
        user_name: { required: true, type: 'string', message: '请填写代理商姓名', trigger: 'blur' },
        mobile: { required: true, type: 'string', message: '请填写代理商电话', trigger: 'blur' },
        level: { required: true, type: 'number', message: '请选择代理等级', trigger: 'change' },
        province_code: { required: true, type: 'string', message: '请选择代理地区', trigger: 'change' },
        over_time: { required: true, type: 'object', message: '请选择', trigger: 'change' }
      }
    }
  },

  created () {
    this.version = JSON.parse(localStorage.getItem('vs'))
    let { id } = this.$route.query
    if (id) {
      this.getFormInfo(id)
    }
    this.getAgentLevelSelect()
  },
  methods: {
    getAgentLevelSelect () {
      this.$api.agentLevelSelect().then(res => {
        if (res.code === 200) {
          this.agentLevelSelect = res.data
          this.agentLevel = 1
          if (res.data.length < 1) return
          this.authForm.level = res.data[0].id
        }
      })
    },
    getFormInfo (id) {
      this.$api.agentAuthInfo({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.authForm) {
            this.authForm[key] = res.data[key]
          }
          this.selectedOptions = res.data.city_code ? [res.data.province_code, res.data.city_code] : [res.data.province_code]
        }
        this.authForm.over_time = new Date(res.data.over_time * 1000)
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let methodModel = this.authForm.id ? 'agentAuthUpdate' : 'agentAuthAdd'
          let subForm = JSON.parse(JSON.stringify(this.authForm))
          subForm.over_time = parseInt((new Date(subForm.over_time).getTime()) / 1000)
          console.log(methodModel, subForm)
          this.$api[methodModel](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.$router.back(-1)
            }
          })
        }
      })
    },
    handleChange (value) {
      this.authForm.province_code = value[0] || ''
      this.authForm.city_code = value[1] || ''
      provinceAndCityData.map((item, index) => {
        if (item.value === value[0]) {
          this.authForm.province = item.label
          if (item.children && item.children.length > 0) {
            item.children.map(aitem => {
              if (aitem.value === value[1]) {
                this.authForm.city = aitem.label
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-cascader {
  width: 300px;
}
</style>
